<template>
  <div class="container">
    <FmTreeTable ref="fmTreeTable" :toolbar="['del']" url="/process/admin" tableName="resource" :columns="columns">
      <template v-slot:pre-exactToolbtn>
        <el-col :span="1.5">
          <el-button
              type="primary"
              plain
              icon="CirclePlusFilled"
              @click=" ()=>{saveVisible = true;form=reactive({});form.isShow=1}"
          >新增一级菜单
          </el-button>
        </el-col>
      </template>
      <template #menu="scope">
        <span :style="{marginLeft: scope.row.level * 50 + 'px'}"></span>
        <i v-if="scope.row.showChildren" :class="scope.row.icon" @click="onExpand(scope.row)"
           :style="{cursor:scope.row.hasChildren ? 'pointer' : 'normal'}"></i>
        <i v-else :class="scope.row.icon" @click="onExpand(scope.row)"
           :style="{cursor:scope.row.hasChildren ? 'pointer' : 'normal'}"></i>
        <span :data-level="scope.row.level" :style="{marginLeft: 4 + 'px'}">{{ scope.row.name }}</span>
      </template>
<!--      <template #category="scope">-->
<!--        <dict-tag :options="dicts.type['rource_type_array']" :value="scope.row.category"/>-->
<!--      </template>-->
      <template #isShow="scope">
        <el-switch
            v-model="scope.row.isShow"
            active-text="显示"
            inactive-text="隐藏"
            :active-value="1"
            :inactive-value="0"
            @change="updateStatus(scope.row)"
        ></el-switch>
      </template>
      <template #opt="scope">
        <el-button
            v-if="scope.row.category!=ROURCE_TYPE.BUTTON.key"
            style="font-size: 15px;"
            type="primary"
            link
            icon="FolderAdd"
            @click="handlersave(scope.row)"
        >
        </el-button>
        <el-button
            type="primary"
            style="font-size: 15px;"
            link
            icon="edit"
            @click="handleEdit(scope.$index, scope.row)"
        >
        </el-button>
      </template>
    </FmTreeTable>
    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" v-model="editVisible" :before-close="function (){editVisible=false}" width="50%"
               destroy-on-close>
      <el-form ref="editform" :model="form" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="编号" prop="id">
              <el-input v-model="form['id']" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="name">
              <el-input v-model="form['name']" placeholder="请输入菜单名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="父id" prop="parent">
              <el-input v-model="form['parent']" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="category">
              <el-select v-model="form['category']">
                <el-option v-for="dict in fmTreeTable.dict('rource_type_array')" :key="dict.value" :label="dict.label"
                           :value="toStrOrInt(form['category'],dict.value)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否缓存" prop="isCached" :rules="maps.get('isCached')['rules']">
              <el-select v-model="form['isCached']" placeholder="请选择是否缓存">
                <el-option v-for="dict in fmTreeTable.dict('is_cached')" :key="dict.value" :label="dict.label"
                           :value="toStrOrInt(form['isCached'],dict.value)"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否显示" prop="isShow">
              <el-switch
                  v-model="form['isShow']"
                  active-text="显示"
                  inactive-text="隐藏"
                  :active-value="1"
                  :inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图标" prop="icon">
              <!-- <el-input v-model="form.icon" placeholder="图标" /> -->
              <!--              <e-icon-picker v-model="form.icon"/>-->
              <vue3-icon-picker v-model:modelValue="form['icon']" style="color:orange"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组件名称" prop="page">
              <el-input v-model="form['page']" placeholder="请输入组件名称"
                        :disabled="form['category']==ROURCE_TYPE.BUTTON.key"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限接口" prop="request">
              <FmSelectTable v-model:value="form['request']" title="权限接口选择" :columns="selectcolumns" keys="apicode"  lable="apiName"  url="/process/admin" tableName="apicode" >
              </FmSelectTable>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限标记" prop="perms">
              <el-input v-model="form['perms']"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="页面地址" prop="path">
              <el-input v-model="form['path']" placeholder="请输入文件所在地址"
                        :disabled="form['category']==ROURCE_TYPE.BUTTON.key"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否外链">
              <el-switch
                  v-model="form['isInnerlink']"
                  active-text="是"
                  inactive-text="否"
                  :active-value="1"
                  :inactive-value="2">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="sort">
              <el-input-number v-model="form['sort']" :min="0"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveEdit(editform)">确 定</el-button>
      </template>
    </el-dialog>
    <!-- 新增弹出框 -->
    <el-dialog title="新增一级菜单" v-model="saveVisible" :before-close="function (){saveVisible=false}" width="50%">
      <el-scrollbar style="height:100%">
      <el-form ref="childform" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="name">
              <el-input v-model="form['name']" placeholder="请输入菜单名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="父id" prop="parent">
              <el-input v-model="form['parent']" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="category">
              <el-select v-model="form['category']" placeholder="请选择菜单类型">
                <el-option v-for="dict in fmTreeTable.dict('rource_type_array')" :key="dict.value" :label="dict.label"
                           :value="toStrOrInt(form['category'],dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否缓存" prop="isCached" :rules="maps.get('isCached')['rules']">
              <el-select v-model="form['isCached']" placeholder="请选择是否缓存">
                <el-option v-for="dict in fmTreeTable.dict('is_cached')" :key="dict.value" :label="dict.label"
                           :value="toStrOrInt(form['isCached'],dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否显示" prop="isShow">
              <el-switch
                  v-model="form['isShow']"
                  active-text="显示"
                  inactive-text="隐藏"
                  :active-value="1"
                  :inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图标" prop="icon">
              <vue3-icon-picker v-model:modelValue="form['icon']" style="color:orange"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组件名称" prop="page">
              <el-input v-model="form['page']" placeholder="请输入组件名称"
                        :disabled="form['category']==ROURCE_TYPE.BUTTON.key||form.category==ROURCE_TYPE.DIR.key"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限接口" prop="request">
              <FmSelectTable v-model:value="form['request']" title="权限接口选择" :columns="selectcolumns" keys="apicode"  lable="apiName"  url="/process/admin" tableName="apicode" >
              </FmSelectTable>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限标记" prop="perms">
              <el-input v-model="form['perms']"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="页面地址" prop="path">
              <el-input v-model="form['path']" placeholder="请输入文件所在地址"
                        :disabled="form['category']==ROURCE_TYPE.BUTTON.key||form.category==ROURCE_TYPE.DIR.key"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否外链">
              <el-switch
                  v-model="form['isInnerlink']"
                  active-text="是"
                  inactive-text="否"
                  :active-value="1"
                  :inactive-value="2">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="sort">
              <el-input-number v-model="form['sort']" :min="0"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      </el-scrollbar>
      <template #footer>
        <el-button type="primary" @click="saveEdit(childform)">确 定</el-button>
        <el-button @click="saveVisible=false">取 消</el-button>
      </template>

    </el-dialog>
    <!-- 新增弹出框 -->
    <el-dialog title="新增子菜单" v-model="savechildVisible" :before-close="function (){savechildVisible=false}"
               width="50%">
      <el-form ref="childform" :model="form" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="name" :rules="maps.get('name')['rules']">
              <el-input v-model="form.name" placeholder="请输入菜单名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="父id" prop="parent" :rules="maps.get('parent')['rules']">
              <el-input v-model="form.parent" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="category" :rules="maps.get('category')['rules']">
              <el-select v-model="form.category" placeholder="请选择菜单类型">
                <el-option v-for="dict in fmTreeTable.dict('rource_type_array')" :key="dict.value" :label="dict.label"
                           :value="toStrOrInt(form.category,dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否缓存" prop="isCached" :rules="maps.get('isCached')['rules']">
              <el-select v-model="form.isCached" placeholder="请选择是否缓存">
                <el-option v-for="dict in fmTreeTable.dict('is_cached')" :key="dict.value" :label="dict.label"
                           :value="toStrOrInt(form.isCached,dict.value)"

                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否显示" prop="isShow" :rules="maps.get('isShow')['rules']">
              <el-switch
                  v-model="form.isShow"
                  active-text="显示"
                  inactive-text="隐藏"
                  :active-value="1"
                  :inactive-value="0"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图标" prop="icon" :rules="maps.get('icon')['rules']">
              <vue3-icon-picker v-model:modelValue="form.icon" style="color:orange"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组件名称" prop="page" :rules="maps.get('page')['rules']">
              <el-input v-model="form.page" placeholder="请输入组件名称"
                        :disabled="form.category==ROURCE_TYPE.BUTTON.key||form.category==ROURCE_TYPE.DIR.key"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限接口" prop="request" :rules="maps.get('request')['rules']">
              <FmSelectTable v-model:value="form['request']" :columns="selectcolumns" title="权限接口选择" keys="apicode"  lable="apiName"  url="/process/admin" tableName="apicode" >
              </FmSelectTable>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限标记" prop="perms" :rules="maps.get('perms')['rules']">
              <el-input v-model="form.perms"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="页面地址" prop="path" :rules="maps.get('path')['rules']">
              <el-input v-model="form.path" placeholder="请输入文件所在地址"
                        :disabled="form.category==ROURCE_TYPE.BUTTON.key||form.category==ROURCE_TYPE.DIR.key"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否外链" prop="isInnerlink" :rules="maps.get('isInnerlink')['rules']">
              <el-switch
                  v-model="form.isInnerlink"
                  active-text="是"
                  inactive-text="否"
                  :active-value="1"
                  :inactive-value="2">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="sort" :rules="maps.get('sort')['rules']">
              <el-input-number type="number" v-model="form.sort" :min="0"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="saveEdit(childform)">确 定</el-button>
        <el-button @click="savechildVisible=false">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import {fetchData, deteleData, saveorUpadateDate, deteleAllData} from '@/api/index';
import {ElMessage, ElMessageBox, FormInstance} from "element-plus";
import {Formattimes} from "@/utils/formattimes";
import {IS_SHOW_MENU, IS_SHOW_MENU_ARRAY, ROURCE_TYPE, ROURCE_TYPE_ARRAY} from "../../../utils/enums";
import moment from "moment";
import Vue3IconPicker from '@/components/Vue3IconPicker/Vue3IconPicker.vue'
import {computed, inject, onMounted, reactive, ref} from "vue";
import {LoadDict} from "@/utils/dict";
import {useStore} from "vuex";

const columns = [
  {
    "label": "菜单名称",//标签名称
    "index": "menu",//数据库索引
    "rules": [],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable": false,
    "editable": false,
    "width": 150
  },
  {
    "label": "菜单名称",//标签名称
    "index": "name",//数据库索引
    "rules": [
      {required: true, message: "请输入菜单名称", trigger: "blur",},
    ],//值规则
    "visible": false,
    "search": true,//是否是搜索表单
    "dataType": "text",//值值类型默认字符类型
    "addable": false,
    "editable": false,
  },
  {
    "label": "图标",//标签名称
    "index": "icon",//数据库索引
    "rules": [],//值规则
    "visible": false,
    "dataType": "text",//值值类型默认字符类型
    "addable": false,
    "editable": false,
  },
  {
    "label": "编号",//标签名称
    "index": "id",//数据库索引
    "rules": [],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable": false,
    "editable": false,
  },
  {
    "label": "父id",//标签名称
    "index": "parent",//数据库索引
    "rules": [],//值规则
    "dataType": "text",//值值类型默认字符类型
  },
  {
    "label": "有权限请求",//标签名称
    "index": "request",//数据库索引
    "rules": [],//值规则
    "dataType": "text",//值值类型默认字符类型
  },
  {
    "type":"dict",
    "dictkey":"rource_type_array",
    "label": "类型",//标签名称
    "index": "category",//数据库索引
    "rules": [
      {required: true, message: '请选择菜单类型', trigger: 'change'}
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable": false,
    "editable": false,
  },
  {
    "type":"dict",
    "dictkey":"is_cached",
    "label": "是否缓存",//标签名称
    "index": "isCached",//数据库索引
    "rules": [
      {required: true, message: '请选择是否缓存', trigger: 'change'}
    ],//值规则
    "visible": false,
    "dataType": "text",//值值类型默认字符类型
  },
  {
    "label": "是否显示",//标签名称
    "index": "isShow",//数据库索引
    "rules": [],//值规则
    "dataType": "text",//值值类型默认字符类型
    "width": 200,
  },
  {
    "label": "排序",//标签名称
    "index": "sort",//数据库索引
    "rules": [
      {type: 'number', required: true, message: '请输入顺序', trigger: 'blur'},
    ],//值规则
    "visible": false,
    "dataType": "number",//值值类型默认字符类型
  },
  {
    "label": "路径",//标签名称
    "index": "path",//数据库索引
    "rules": [],//值规则
    "dataType": "text",//值值类型默认字符类型
  },
  {
    "label": "组件名称",//标签名称
    "index": "page",//数据库索引
    "rules": [],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable": false,
    "editable": false,
  },
  {
    "label": "权限标识",//标签名称
    "index": "perms",//数据库索引
    "rules": [],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable": false,
    "editable": false,
  },
  {
    "label": "是否外链",//标签名称
    "index": "isInnerlink",//数据库索引
    "rules": [],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable": false,
    "editable": false,
  },
  {
    "label": "创建时间",//标签名称
    "index": "createTime",//数据库索引
    "rules": [],//值规则
    "dataType": "text",//值值类型默认字符类型
  },
  {
    "label": "操作",//标签名称
    "index": "opt",//数据库索引
    "rules": [],//值规则
    "dataType": "text",//值值类型默认字符类型
  },
]
const selectcolumns=[
  {
    "label": "主键",//标签名称
    "index": "id",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "search": true,//是否是搜索表单
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "label": "接口编号",//标签名称
    "index": "apicode",//数据库索引
    "rules": [
      {  max: 50, message: '接口编号长度最大为  50个字符', trigger: 'blur' },
    ],//值规则
    "search": true,//是否是搜索表单
    "dataType": "text",//值值类型默认字符类型
  },
  {
    "label": "接口名称",//标签名称
    "index": "apiName",//数据库索引
    "rules": [
      {  max: 100, message: '接口名称长度最大为  100个字符', trigger: 'blur' },
    ],//值规则
    "search": true,//是否是搜索表单
    "dataType": "text",//值值类型默认字符类型
  },
  {
    "label": "表名",//标签名称
    "index": "tablename",//数据库索引
    "rules": [
      {  max: 100, message: '接口名称长度最大为  100个字符', trigger: 'blur' },
    ],//值规则
    "search": true,//是否是搜索表单
    "dataType": "text",//值值类型默认字符类型
  },
  {
    "label": "所属模块",//标签名称
    "index": "module",//数据库索引
    "rules": [
      {  max: 30, message: '所属模块长度最大为  30个字符', trigger: 'blur' },
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
  },
  {
    "label": "状态",//标签名称
    "index": "status",//数据库索引
    "rules": [
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
  }
]
const updateStatus = (row) => {
  if (Object.keys(row).length > 1) {
    saveorUpadateDate('/process/admin/resource/save', row).then(res => {
      ElMessage.success("更新状态成功")
    });
  }
}
// let dicts = LoadDict(["1"])
let form: any = reactive({})
let editform = ref<FormInstance>()
let addform = ref<FormInstance>()
let childform = ref<FormInstance>()
let editVisible = ref(false)
let savechildVisible = ref(false)
let saveVisible = ref(false)
let fmTreeTable = ref()
const store = useStore();
let apicodeList = reactive([])
let maps = reactive({})
const handleEdit = (index: any, row: any) => {
  form = row;
  if (form.hasOwnProperty("request") && form.request != undefined && form.request != '')
    form.request = JSON.parse(form.request)
  editVisible.value = true;
}
const handlersave = (row: any) => {
  savechildVisible.value = true;
  form = reactive({});
  form.isShow = 1;
  debugger
  form.parent = row.id
}
const saveEdit = (formName: any) => {
  formName.validate((valid) => {
    if (valid) {
      form.children = []
      form.createTime = null
      if (form.hasOwnProperty("request") && form.request != undefined)

        form.request = JSON.stringify(form.request)
      // if( this.form.request.indexOf("[")==-1) {
      //     this.form.request = '["' + this.form.request + '"]';
      // }
      saveorUpadateDate('/process/admin/resource/save', form).then(res => {
        ElMessage.success("保存成功")
        fmTreeTable.value.readyGetData()
        saveVisible.value = false
        editVisible.value = false
        savechildVisible.value = false
        form = reactive({})
      });
    } else {
      return false;
    }
  })
}
const toStrOrInt=((formdata:any,item:any)=>{
  return (typeof formdata==='string')?item:parseInt(item)
})
onMounted(() => {
  let map = new Map();
  for (let i = 0; i < columns.length; i++) {
    map.set(columns[i].index, columns[i]);
  }
  maps = reactive(map)
})


</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

</style>